<!-- 通用Header -->
<script setup lang="ts">
import { UnorderedListOutlined } from '@ant-design/icons-vue';
import logo from '@/assets/1.jpg'
import logo2 from '@/assets/2.jpg'
import NormalSider from './NormalSider.vue';
import { ref } from 'vue';
import type { CustomItemType } from '@/types/NormalMenu/menu';

const props = defineProps<{
  title: string;
  menuTitle?: string;
  menuList?: CustomItemType[];
}>();

const siderRef = ref<any>();

const toggleDrawer = () => {
  // 操作siderRef中的toggleDrawer方法
  siderRef.value.toggleDrawer();
};
</script>

<template>
  <a-layout-header class="header">
    <div class="left-section">
      <!-- showMenu按钮 -->
      <a-button
        type="text"
        @click="toggleDrawer"
      >
        <UnorderedListOutlined style="font-size: 1.7rem;" />
      </a-button>
      <img :src="logo" alt="Logo" class="logo">
      <!-- 输入的标题 -->
      <span style="font-size: 1.5rem; font-weight: 600;">{{ props.title || '默认标题' }}</span>
    </div>
    <div class="right-section">
      <!-- 头像 -->
      <a-avatar size="large" :src="logo2" style="cursor: pointer" />
    </div>
  </a-layout-header>
  <NormalSider ref="siderRef" :title="menuTitle ? menuTitle : undefined" :menus="menuList ? menuList : undefined" />
</template>

<style scoped lang="scss">
.header {
  display: flex;
  width: 100vw;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 0 1rem;
  border-bottom: 0.0625rem solid #cdc8c8;
}

.logo {
  height: 2.5rem;
  margin-right: 0.25rem;
  object-fit: contain;
}

.left-section {
  display: flex;
  align-items: center;
}

.right-section {
  display: flex;
  align-items: center;
}
</style>
